<template>
  <div class="search_box">
    <div class="searchbox_a">
      <div class="search_icon">
        <img :src="searchIcon">
      </div>
      <div class="searIbx">
        <span class="fr QT-searGJkg curP"
              @click="advancedSearch">高级搜索
          <i class="icon iconfont"
             :class="{'icon-qianjin':!isAdvancedFlag,'icon-xiangxia1':isAdvancedFlag}"></i>
        </span>
        <el-input class="in-searInp"
                  v-model="searchVal"
                  @keyup.native.enter="handlerSearch"></el-input>
        <el-button type="primary"
                   class="in-searEnt"
                   @click="handlerSearch">
          <i class="icon iconfont icon-search2"></i>搜索</el-button>
        <el-alert v-show="input_error"
                  title="您还没有填写关键词"
                  type="error"
                  @close="handlerClose"> </el-alert>
      </div>
    </div>
    <!-- <div class="searchbox_b">
      <div id="searShowA">
        <div class="B-searIcoLs"
             id="typeYbA">
          <kbd @click="typeYbKbd('All')"
               :class="{active:type=='All'}">
            <strong>
              <i class="icon iconfont icon-quanbu"></i>
            </strong>
            <span>全部</span>
          </kbd>
          <kbd @click="typeYbKbd('Entity')"
               :class="{active:type=='Entity'}">
            <strong>
              <i class="icon iconfont icon-icon-goods"></i>
            </strong>
            <span>实体</span>
          </kbd>
          <kbd @click="typeYbKbd('Document')"
               :class="{active:type=='Document'}">
            <strong>
              <i class="icon iconfont icon-wendang3"></i>
            </strong>
            <span>文档</span>
          </kbd>
          <kbd @click="typeYbKbd('Event')"
               :class="{active:type=='Event'}">
            <strong>
              <i class="icon iconfont icon-lishijilu"></i>
            </strong>
            <span>事件</span>
          </kbd>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import searchIcon from '@/images/search-icon.png'
import util from '@/utils'
export default {
    data () {
        return {
            searchIcon,
            // 搜索关键字
            searchVal: '',
            // 输入框错误输入提示标识符
            input_error: false,
            // 类别
            type: 'All',
            enterType: 'All',
            // 是否高级搜索标识符
            isAdvancedFlag: false

        }
    },
    methods: {
        handlerSearch () {
            if (util.isEmpty(this.searchVal)) {
                this.input_error = true
            } else {
                this.$router.push({
                    path: '/search-show',
                    query: {
                        type: this.type,
                        enterType: this.enterType,
                        searchVal: this.searchVal
                    }
                })
                this.input_error = false
            }
        },
        // 高级搜索
        advancedSearch () {
            this.$router.push('/advanced-search')
        },
        // 计算后的dataType
        computedDataType (type) {
            let dataType = ''
            switch (this.type) {
            case 'All':
                dataType = 'All'
                break
            case 'Entity':
                dataType = 'com.scistor.object.entity'
                break
            case 'Document':
                dataType = 'com.scistor.object.document'
                break
            case 'Event':
                dataType = 'com.scistor.object.event'
                break
            default:
                dataType = 'com.scistor.object.media'
            }
            return dataType
        },

        // 清除输入框输入错误提示
        handlerClose () {
            this.input_error = false
        },
        // 切换搜索类型
        typeYbKbd (type) {
            this.type = type
            this.enterType = type
        }
    }
}
</script>
<style lang="less" scoped>
@bg_img: url(../../images/search-back.jpg);
.el-dialog {
	width: 30%;
	.el-dialog__header {
		background-color: #157dd0;
		.el-dialog__title {
			color: #fff;
		}
	}
}
.search_box {
	background: @bg_img no-repeat center top;
	background-size: 100% auto;
	.searchbox_a {
		width: 800px;
		margin: auto;
		text-align: center;
		line-height: 48px;
		.search_icon {
			padding: 5% 0;
		}
		.searIbx {
			height: 150px;
			.in-searInp {
				height: 50px;
				width: 580px;
				float: left;
			}
			.el-input__inner {
				height: 50px;
				line-height: 50px;
				font-size: inherit;
				border: solid 1px #3885d5;
			}
			.el-alert {
				width: 580px;
				padding: 0px;
				background-color: transparent;
			}
			.in-searEnt {
				height: 40px;
				float: left;
				padding: 0 24px;
				background-color: #1169c4;
				font-size: 1.2em;
				margin-top: 2px;
				.icon {
					margin-right: 5px;
				}
			}
		}
	}

	.searchbox_b {
		width: 1000px;
		margin: auto;
		.el-input__inner {
			height: 32px;
		}

		// .timeRange {
		// 	.el-date-editor .el-range__icon {
		// 		line-height: 24px !important;
		// 	}
		// 	.el-range-separator {
		// 		line-height: 24px !important;
		// 	}
		// }
		.B-searIcoLs {
			text-align: center;
			.active {
				color: #0d5fb4;
			}
			kbd {
				display: inline-block;
				width: 100px;
				height: 130px;
				margin: 0px 6px;
				text-align: center;
				color: #999;
				strong {
					display: block;
					font-weight: normal;
					i.icon {
						font-size: 80px;
						line-height: 100px;
					}
				}
			}
		}
		.objUriClass {
			margin: 4px 0;
		}
	}
}
</style>
<style lang="less">
.timeRange {
	.el-input__inner {
		height: 32px;
	}
	.el-input__icon {
		line-height: 32px;
		height: 32px;
	}
}
</style>
